<h3>类型</h3>
<h4>一组按钮</h4>
<p>通过div.btn-group包含多个button</p>
<div class="example btn-group" contenteditable="true">
  <button type="button" class="btn">左</button> <button type="button" class=
  "btn">中</button> <button type="button" class="btn">右</button>
</div>
<h4>多组按钮</h4>
<p>通过div.btn-toolbar包含.div.btn-group</p>
<div style="margin: 0;" class="example btn-toolbar" contenteditable="true">
  <div class="btn-group">
    <button class="btn">1</button> <button class="btn">2</button>
    <button class="btn">3</button> <button class="btn">4</button>
  </div>
  <div class="btn-group">
    <button class="btn">5</button> <button class="btn">6</button>
    <button class="btn">7</button>
  </div>
  <div class="btn-group">
    <button class="btn">8</button>
  </div>
</div>
<h4>垂直按钮组</h4>
<p>通过div.btn-group-vertical实现</p>
<div class="example btn-group btn-group-vertical" contenteditable="true">
  <button type="button" class="btn">上</button> <button type="button" class=
  "btn">中</button> <button type="button" class="btn">下</button>
</div>
<h3>变化</h3>
<h4>基本下拉按钮组</h4>
<p>将<code>.input-group</code>放置于另一个<code>.input-group</code>中。</p>
<div class="example btn-group" contenteditable="true">
  <button type="button" class="btn btn-default">吃</button> <button type=
  "button" class="btn btn-default">喝</button>
  <div class="btn-group">
    <button id="btnGroupDrop1" type="button" class=
    "btn btn-default dropdown-toggle" data-toggle="dropdown">更多</button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
      <li>
        <a href="#">拉</a>
      </li>
      <li>
        <a href="#">撒</a>
      </li>
    </ul>
  </div>
</div>
<h4>分裂式下拉按钮组</h4>
<p>基本按钮组的变形，将第二个按钮改成图标即可。</p>
<div class="example btn-group" contenteditable="true">
  <button type="button" class="btn btn-danger">操作</button>
  <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle=
    "dropdown"><span class="sr-only">操作</span></button>
    <ul class="dropdown-menu" role="menu">
      <li>
        <a href="#">编辑</a>
      </li>
      <li>
        <a href="#">删除</a>
      </li>
      <li>
        <a href="#">增加</a>
      </li>
    </ul>
  </div>
</div>
<h4>上拉按钮组</h4>
<p>通过div.dropup实现</p>
<div class="example btn-group dropup" contenteditable="true">
  <button type="button" class="btn btn-danger">操作</button>
  <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle=
    "dropdown"><span class="sr-only">操作</span></button>
    <ul class="dropdown-menu" role="menu">
      <li>
        <a href="#">编辑</a>
      </li>
      <li>
        <a href="#">删除</a>
      </li>
      <li>
        <a href="#">增加</a>
      </li>
    </ul>
  </div>
</div>
<h4>大小</h4>
<p>通过.btn-lg .btn-sm .btn-xs实现</p>
<div style="margin: 0;" class="example btn-toolbar" contenteditable="true">
  <div class="btn-group">
    <button type="button" class="btn btn-lg">左</button> <button type="button"
    class="btn btn-lg">中</button> <button type="button" class=
    "btn btn-lg">右</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn">左</button> <button type="button" class=
    "btn">中</button> <button type="button" class="btn">右</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-sm">左</button> <button type="button"
    class="btn btn-sm">中</button> <button type="button" class=
    "btn btn-sm">右</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-xs">左</button> <button type="button"
    class="btn btn-xs">中</button> <button type="button" class=
    "btn btn-xs">右</button>
  </div>
</div>
<h4>颜色</h4>
<div class="example btn-group" contenteditable="true">
  <button type="button" class="btn">默认</button> <button type="button" class=
  "btn btn-primary">.btn-primary</button> <button type="button" class=
  "btn btn-warning">.btn-primary</button> <button type="button" class=
  "btn btn-danger">.btn-danger</button> <button type="button" class=
  "btn btn-success">.btn-success</button> <button type="button" class=
  "btn btn-info">.btn-info</button>
</div>
